import { useState } from 'react'
import './App.scss'
import bozai from  './images/bozai.png'
import moment from 'moment';
import classNames from 'classnames';
import orderBy from 'lodash/orderBy'
/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 * 3. 喜欢和不喜欢
 */

// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar:
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    // 喜欢数量
    like: 98,
    // 0：未表态 1: 喜欢 2: 不喜欢
    action: 0,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar:
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
    action: 2,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg',
      uname: 'ayu',
    },
    content: 'ayuyuy',
    ctime: '10-19 09:00',
    like: 66,
    action: 1,
  },
  {
    rpid: 0,
    user: {
      uid: '30009257',
      avatar:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg',
      uname: 'ayu',
    },
    content: '测试账号',
    ctime: '11-19 09:00',
    like: 66,
    action: 1,
  },
]

// const defaultList = []

// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg',
  // 用户昵称
  uname: 'xiaoyu',
}

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

function App() {
  const [list, setList] = useState(defaultList) // 评论列表
  const [comment,setComment] = useState() // 用户发表的评论
  const [active,setActive] = useState('hot')
   
  const deleteComment = (id)=>{
    console.log('删除');
    setList(defaultList.filter(item => item.rpid !== id))
  }

  const sendComment = ()=>{
    console.log('发表评论',comment);
    const rpid = defaultList[0].rpid + 1
    const ctime = moment().format('MM-DD HH:mm');
    // 在最后一个人上+1
    const data = {
      // 评论id
      rpid,
      // 用户信息
      user: user,
      // 评论内容
      content: comment,
      // 评论时间: '10-18 08:15'
      ctime,
      // 喜欢数量
      like: 0,
      // 0：未表态 1: 喜欢 2: 不喜欢
      action: 0,
    }
    setList([data,...list])
    setComment('')
  }

  const inputChange = (e)=>{
    setComment(e.target.value)
  }

  const giveALike = (id)=>{
    setList(list.map(item => {
      if(item.rpid === id && item.action !== 1){
        item.like += 1
        item.action = 1
      }
      return item
    }))
    // like-active
  }

  const giveADislike = (id)=>{
    setList(list.map(item => {
      if(item.rpid === id && item.action !== 2){
        item.like -= 1
        item.action = 2
      }
      return item
    }))
  }

  const ontoggle = (type) =>{
    // 切换
    setActive(type)
    // 最新排序
    let newList = []
    if(type === 'hot'){
      // 最热排序
      console.log('hot');   
      newList = orderBy(list, 'like','desc')
    }else{
      console.log('new');
      newList = orderBy(list,'rpid','desc')
    }
    setList(newList)
  }

  return (
    <div className="App">
      <div className="reply-nav">
        <div className='nav-left'>
          <span>评论</span>
          <span>{defaultList.length}</span>
        </div>
        <div className='nav-trigger'>
          {
            tabs.map((item,index) => {
              return (
                <span className= {
                  classNames({
                    'active': item.type === active
                  })
                }
                key={index}
                onClick={()=> ontoggle(item.type)}
                >{item.text}</span>
              )
            })
          }
        </div>
      </div>
      <div className="replay-input">
        <div className='input-img'>
          <img src={bozai} alt="用户头像"></img>
        </div>
        <div className='input-textarea'>
          <textarea value={comment} onChange={inputChange} placeholder='发一条友善的评论'>
          </textarea>
        </div>
        <div className='input-btn'>
          <button onClick={sendComment}>发布</button>
        </div>
      </div>
      <div className="replay-comments">
        {
          list.map((item,index) =>{
            return (
              <div className='comment' key={index}>
              <div className='user-img'>
                <img src={item.user.avatar} alt='评论区用户头像'></img>
              </div>
              <div className='user-content'>
                <div className='username'>{item.user.uname}</div>
                <div className='comment'>{item.content}</div>
                <div className='content-bottom'>
                  <div className='content-time'>{item.ctime}</div>
                  <div className='praise'>
                    <i className={classNames('icon',{
                      'like-icon':item.action === 0 || 2,
                      'like-active':item.action === 1
                    })} onClick={()=>giveALike(item.rpid)}></i>
                    <span>{item.like}</span>
                  </div>
                  <div className='trample'>
                    <i className={
                      classNames('icon',{
                        'dislike-icon': item.action === 0 || 1,
                        'dislike-active': item.action === 2
                      })
                    } onClick={()=>giveADislike(item.rpid)} ></i>
                  </div>
                  { item.user.uid === user.uid && (<div className='delete' onClick={()=>deleteComment(item.rpid)}>删除</div>)}
                </div>
                <hr></hr>
              </div>
            </div>
            )
          })
        }
        {
          list.length === 0 && (<div className='no-comment'>
          暂无评论
          </div>) 
        }
      </div>
    </div>
  );
}

export default App;
